<template>
  <div>
    <!-- <div style="margin-bottom: 30px;">
    <el-button type="success">你可以选择想要的布局方式:</el-button>
    <el-radio-group v-model="tabPosition" >
      <el-radio-button label="top">上</el-radio-button>
      <el-radio-button label="bottom">下</el-radio-button>
      <el-radio-button label="left">左</el-radio-button>
      <el-radio-button label="right">右</el-radio-button>
    </el-radio-group>
    </div> -->
    <el-tabs :tab-position="tabPosition" style="height: 440px;">
      <el-tab-pane label="班级学费信息">
        <el-table
          ref="filterTable"
          :data="tuitionData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          style="width: 100%"
          :default-sort="{prop:'studentClassId',order:'descending'}"
          stripe
          @selection-change="selected"
          max-height="1000"
        >
          <el-table-column fixed type="selection" width="55"></el-table-column>
           <el-table-column prop="typeName" label="费用类型" width="150"></el-table-column>
          <el-table-column prop="className" label="班级名称" width="150"></el-table-column>

          <el-table-column v-if="false" prop="tuition_Id" label="学生班级ID" width="150"></el-table-column>
          <el-table-column v-if="false" prop="charge_type_Id" label="费用类型ID" width="150"></el-table-column>
          <el-table-column sortable v-if="false" prop="student_class_Id" label="id" width="150"></el-table-column>
          <el-table-column prop="price" label="学费价格" width="150">
            <template slot-scope="scope">
              <span>￥{{scope.row.price / 1.00 | rounding}}元</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="缴费状态"
            width="150"
            :filters="[{ text: '已缴费', value: '已缴费' }, { text: '未缴费', value: '未缴费' }]"
            :filter-method="filterStatus"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === '已缴费' ? 'success' : scope.row.status === '已缴费' ?'success' :'warning'"
                disable-transitions
              >{{scope.row.status === '已缴费' ? '已缴费' : scope.row.status === '未缴费' ? '未缴费' : '未选择'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="comment" label="备注" width="120"></el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                v-if="tuitionTrue(scope.row.status)"
                type="primary"
                icon="el-icon-s-promotion"
                size="mini"
                @click="handleTuition(scope.row.price)"
              >去缴费</el-button>

              <el-button
              v-if="tuitionFalse(scope.row.status)"
                type="primary"
                :disabled="true"
                icon="el-icon-s-claim"
                size="mini"
              >已缴费</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page="currentPage"
            :page-sizes="[3,6,8,10,20,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tuitionData.length"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="退班费用信息">
        <el-table
          ref="filterTable"
          :data="quitTuitionData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          style="width: 100%"
          :default-sort="{prop:'return_Id',order:'descending'}"
          stripe
          row-key="return_Id"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @selection-change="selected"
          max-height="1000"
        >
          <el-table-column fixed type="selection" width="55"></el-table-column>
          <el-table-column prop="typeName" label="费用类型" width="150"></el-table-column>
          <!-- <el-table-column  prop="returnStatus" label="费用状态" width="150"></el-table-column> -->

          <el-table-column
            prop="originalClass"
            label="原有班级"
            width="160"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column v-if="false" prop="return_Id" label="学期班级费用ID" width="150"></el-table-column>
          <el-table-column v-if="false" prop="quit_Id" label="班级ID" width="150"></el-table-column>
          <el-table-column v-if="false" prop="charge_type_Id" label="费用类型ID" width="150"></el-table-column>
          <el-table-column prop="sumMoney" label="退费价格" width="150">
            <template slot-scope="scope">
              <span>￥{{scope.row.sumMoney / 1.00 | rounding}}.00 元</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="returnStatus"
            label="退费状态"
            width="150"
            :filters="[{ text: '已退费', value: '已退费' }, { text: '未退费', value: '未退费' }]"
            :filter-method="filterStatus"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.returnStatus === '已退费' ? 'success' : scope.row.returnStatus === '已退费' ?'success' :'warning'"
                disable-transitions
              >{{scope.row.returnStatus === '已退费' ? '已退费' : scope.row.returnStatus === '未退费' ? '未退费' : '未选择'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="comment" label="备注" width="120"></el-table-column>

          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
                 <el-button
                v-if="quitTuitionTrue(scope.row.returnStatus)"
                type="primary"
                icon="el-icon-s-promotion"
                size="mini"
                @click="handleQuitTuition(scope.row.sumMoney)"
              >去退费</el-button>

              <el-button
              v-if="quitTuitionFalse(scope.row.returnStatus)"
                type="primary"
                :disabled="true"
                icon="el-icon-s-claim"
                size="mini"
              >已退费</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page="currentPage"
            :page-sizes="[3,6,8,10,20,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="quitTuitionData.length"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="转班费用信息">
        <el-table
          ref="filterTable"
          :data="transferTuitionData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          style="width: 100%"
          :default-sort="{prop:'transfer_price_Id',order:'descending'}"
          stripe
          row-key="transfer_price_Id"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @selection-change="selected"
          max-height="1000"
        >
          <el-table-column fixed type="selection" width="55"></el-table-column>
          <el-table-column prop="typeName" label="费用类型" width="150"></el-table-column>

          <el-table-column
            prop="originalClass"
            label="原有班级"
            width="160"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column prop="nowClass" label="转入班级" width="160" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column v-if="false" prop="transfer_price_Id" label="学期班级费用ID" width="150"></el-table-column>
          <el-table-column v-if="false" prop="transfer_Id" label="班级ID" width="150"></el-table-column>
          <el-table-column v-if="false" prop="charge_type_Id" label="费用类型ID" width="150"></el-table-column>
          <el-table-column prop="originalClassMoney" label="原有价格" width="130">
            <template slot-scope="scope">
              <span>￥{{scope.row.originalClassMoney / 1.00 | rounding}}.00 元</span>
            </template>
          </el-table-column>
          <el-table-column prop="nowClassMoney" label="现有价格" width="130">
            <template slot-scope="scope">
              <span>￥{{scope.row.nowClassMoney / 1.00 | rounding}}.00 元</span>
            </template>
          </el-table-column>
          <el-table-column prop="priceSpread" label="转班差价" width="130">
            <template slot-scope="scope">
              <span>￥{{scope.row.priceSpread / 1.00 | rounding}}.00 元</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="缴费状态"
            width="120"
            :filters="[{ text: '已缴费', value: '已缴费' }, { text: '未缴费', value: '未缴费' },
             { text: '未退费', value: '未退费' },{ text: '已退费', value: '已退费' },{ text: '未选择', value: '未选择' }]"
            :filter-method="filterStatus"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <el-tag
                :type="transferTagType(scope.row.status)"
                disable-transitions
              >{{transferTagText(scope.row.status)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="comment" label="备注" width="120"></el-table-column>

          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
               <el-button
                v-if="transferTuitionFalse2(scope.row)"
                type="primary"
                icon="el-icon-s-promotion"
                size="mini"
                @click="handleTransferTuition(scope.row.priceSpread)"
              >去缴费</el-button>

              <el-button
                v-if="transferTuitionTrue(scope.row)"
                type="primary"
                icon="el-icon-s-promotion"
                size="mini"
                @click="handleTransferTuitionQuit(scope.row.priceSpread)"
              >去退费</el-button>

              <el-button
              v-if="transferTuitionFalse(scope.row)"
                type="primary"
                :disabled="true"
                icon="el-icon-s-claim"
                size="mini"
              >已缴费</el-button>

              <el-button
              v-if="transferTuitionTrue2(scope.row)"
                type="primary"
                :disabled="true"
                icon="el-icon-s-claim"
                size="mini"
              >已退费</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page="currentPage"
            :page-sizes="[3,6,8,10,20,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="transferTuitionData.length"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="其他费用信息">其他费用通道暂未开通</el-tab-pane>
    </el-tabs>
    <el-dialog title="费用缴纳" :visible.sync="dialogForTuition" width="30%">
      <el-input  v-model="tuitionInputValue"><template slot="prepend">缴费金额:</template></el-input>
      <img src="../../../assets/支付宝.jpg" alt="" width="200">
    </el-dialog>
    <el-dialog title="费用缴纳" :visible.sync="dialogForQuitTuition" width="30%" height="400">
      <el-input v-model="quitTuitionInputValue"><template slot="prepend" >退费金额&nbsp;&nbsp;&nbsp;&nbsp;:</template></el-input>
      <el-input class="mb"><template slot="prepend" >支付宝账号:</template></el-input>
      <el-button type="primary" class="mb" @click="dialogForQuitTuition=false">取消</el-button>
      <el-button type="primary" @click="dialogForQuitTuition=false">确认提交</el-button>
    </el-dialog>
    <el-dialog title="费用缴纳" :visible.sync="dialogForTransferTuition" width="30%">
      <el-input v-model="transferTuitionInputValue"><template slot="prepend">缴费金额:</template></el-input>
      <img src="../../../assets/支付宝.jpg" alt="" width="200">
    </el-dialog>
     <el-dialog title="费用缴纳" :visible.sync="dialogForTransferTuitionQuit" width="30%">
      <el-input v-model="transferTuitionInputValue"><template slot="prepend">退费金额&nbsp;&nbsp;&nbsp;&nbsp;:</template></el-input>
      <el-input class="mb"><template slot="prepend">支付宝账号:</template></el-input>
      <el-button type="primary" class="mb">取消</el-button>
      <el-button type="primary">确认提交</el-button>
    </el-dialog>
  </div>
</template>
<style>
.mb{
  margin-top: 20px;
}
.ml{
  margin-left: 20px;
}
</style>
<script>
import moment from 'moment'
export default {
  inject: ['reload'],
  data () {
    return {
      userId: this.$store.state.user.userId,
      tuitionData: [], // 学费数据信息
      quitTuitionData: [], // 退班费数据信息
      transferTuitionData: [], // 转班费数据信息
      selectedCheckBox: [],
      pageSize: 6,
      currentPage: 1,
      tabPosition: 'top', // tab标签位置
      dialogForTuition: false, // 学费
      dialogForQuitTuition: false, // 退费
      dialogForTransferTuition: false, // 转班缴费
      dialogForTransferTuitionQuit: false, // 转班退费
      tuitionInputValue: '', // 学费model
      quitTuitionInputValue: '', // 退班费model
      transferTuitionInputValue: '' // 转班费model

    }
  },
  created () {
    this.tuitionDataInit()
    this.quitTuitionDataInit()
    this.transferTuitionDataInit()
  },
  // 定义私用局部过滤器。只能在当前 vue 对象中使用
  filters: {
    rounding (value) {
      return value.toFixed(2)
    }
  },
  methods: {
    transferTagType (type) {
      if (type === '已缴费') {
        return 'success'
      } else if (type === '未缴费') {
        return 'danger'
      } else if (type === '已退费') {
        return 'success'
      } else if (type === '未退费') {
        return 'danger'
      } else if (type === '未选择') {
        return 'warning'
      }
    },
    transferTagText (text) {
      if (text === '已缴费') {
        return '已缴费'
      } else if (text === '未缴费') {
        return '未缴费'
      } else if (text === '已退费') {
        return '已退费'
      } else if (text === '未退费') {
        return '未退费'
      } else if (text === '未选择') {
        return '未选择'
      }
    },
    handleTuition: function (value) {
      // 打开添加操作dialog方法
      this.dialogForTuition = true
      this.tuitionInputValue = value + '.00 元'
    },
    handleQuitTuition: function (value) {
      // 打开添加操作dialog方法
      this.dialogForQuitTuition = true
      this.quitTuitionInputValue = value + '.00 元'
    },
    handleTransferTuition: function (value) {
      // 打开添加操作dialog方法
      this.dialogForTransferTuition = true
      this.transferTuitionInputValue = Math.abs(value) + '.00 元'
    },
    handleTransferTuitionQuit: function (value) {
      // 打开添加操作dialog方法
      this.dialogForTransferTuitionQuit = true
      this.transferTuitionInputValue = Math.abs(value) + '.00 元'
    },
    transferTuitionTrue (info) {
      if (info.priceSpread > 0) {
        if (info.status === '未退费') {
          return true
        } else {
          return false
        }
      }
    },
    transferTuitionTrue2 (info) {
      if (info.priceSpread > 0) {
        if (info.status === '已退费') {
          return true
        } else {
          return false
        }
      }
    },
    transferTuitionFalse (info) {
      if (info.priceSpread < 0) {
        if (info.status === '已缴费') {
          return true
        } else {
          return false
        }
      }
    },
    transferTuitionFalse2 (info) {
      if (info.priceSpread < 0) {
        if (info.status === '未缴费') {
          return true
        } else {
          return false
        }
      }
    },
    quitTuitionTrue (info) {
      if (info === '未退费') {
        return true
      } else {
        return false
      }
    },
    quitTuitionFalse (info) {
      if (info === '已退费') {
        return true
      } else {
        return false
      }
    },
    tuitionTrue (info) {
      if (info === '未缴费') {
        return true
      } else {
        return false
      }
    },
    tuitionFalse (info) {
      if (info === '已缴费') {
        return true
      } else {
        return false
      }
    },
    tuitionDataInit () {
      // 学生的班级学费信息
      // alert(this.userId)
      this.$axios
        .post('/tuitions/tuitionByUserId', {
          json: this.userId
        })
        .then(response => (this.tuitionData = response.data.data))
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    quitTuitionDataInit () {
      // 学生的退班费用信息
      this.$axios
        .post('/returns/returnTuitionByUserId', {
          json: this.userId
        })
        .then(response => (this.quitTuitionData = response.data.data))
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    transferTuitionDataInit () {
      // 学生的转班费用信息
      this.$axios
        .post('/transferPrices/transferTuitionByUserId', {
          json: this.userId
        })
        .then(response => (this.transferTuitionData = response.data.data))
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    clearFilter () {
      // 清空拦截器
      this.$refs.filterTable.clearFilter()
    },
    filterStatus (value, row) {
      // 筛选
      return row.returnStatus === value
    },
    dateFormat (row, column) {
      // 修改时间格式
      var date = row[column.property]

      if (date === undefined) {
        return ''
      } else if (date === null) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    handleSizeChange (val) {
      this.currentPage = 1
      this.pageSize = val
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
    },
    selected: function (value) {
      // 复选框获取已经被选择的记录
      this.selectedCheckBox = value
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    }
  }
}
</script>
